<template>
    <div >
         <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/product/list' }">积分商品</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.type == 'edit'?'积分商品修改':'积分商品新增'}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :model="scoreSaveDto" :rules="rules" ref="scoreSaveDto" label-width="100px" style="padding:30px" class="demo-ruleForm">
            <el-form-item label="板块名称" prop="typeId">
                <el-select  ref="editJobGrade"  filterable allow-create style="width: 400px;" @change="selectMode"  v-model="scoreSaveDto.typeId" >
                   <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="添加商品" prop="sku">
                <el-select v-model="scoreSaveDto.sku" style="width: 400px;" placeholder="请选择商品">
                   <el-option v-for="item in skuList" :key="item.sku" :label="item.spuName" :value="item.sku"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="兑换类型" prop="convertType" >
                <el-select v-model="scoreSaveDto.convertType" @change="changeCnvertType" style="width: 400px;" placeholder="请选择兑换类型">
                    <el-option value="全部积分">全部积分</el-option>
                    <el-option  value="积分现金">积分现金</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="兑换价格">
                <el-col :span="5"> <el-input v-model="scoreSaveDto.convertNum" style="width: 150px;" placeholder="请填写积分"></el-input>分</el-col>
                <el-col v-if="scoreSaveDto.convertType =='积分现金'" :span="5"> <el-input v-model="scoreSaveDto.convertPrice" style="width: 150px;" placeholder="请填写金额"></el-input>元</el-col>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="scoreSaveDto.stock" style="width: 400px;" placeholder="请填写商品销售的库存"></el-input>
            </el-form-item>
            <el-form-item label="销量">
                <el-input v-model="scoreSaveDto.sellNum" style="width: 400px;" placeholder="请填写商品界面展示销量"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="scoreSaveDto.sort" style="width: 400px;" placeholder="请填写商品界面排序"></el-input>
            </el-form-item>
            <el-form-item label="上下架状态">
                <el-select v-model="scoreSaveDto.shelves" style="width: 400px;" placeholder="请选择状态">
                    <el-option v-for="item in stateList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="comeBack()">返回</el-button>
                <el-button type="primary" @click="submitForm('scoreSaveDto')">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import { spuAjax } from 'Ajax'
export default {
    data() {
      return {
          scoreSaveDto:{
              typeId:'', //板块id
              modeName:'',//板块名称
              convertType:'全部积分', //兑换类型
              convertNum: '', //兑换积分
              convertPrice:'', //兑换金额
              stock:'', //库存
              sellNum:'', //销量
              sort: '', //排序
              shelves: true, //上下架状态
              sku:'',
          },
          rules: {
            // typeId: [
            // { required: true, message: '请选择板块名称', trigger: 'change' }
            // ]
        },
        skuList:[],
        detailInfo:{},
        options: [],
        stateList:[{
          value: true,
          label: '上架'
        }, {
          value: false,
          label: '下架'
        }]
      }
    },
    props: [ "type","params"],
    created(){
        this.getUnitList()
        this.getSkuList()
        if(this.type == 'edit'){
            let detail = JSON.parse(this.params);
            this.scoreSaveDto.convertType = detail.convertType
            this.scoreSaveDto.convertNum = detail.convertNum
            this.scoreSaveDto.convertPrice = detail.convertPrice
            this.scoreSaveDto.stock = detail.stock
            this.scoreSaveDto.sellNum = detail.sellNum
            this.scoreSaveDto.sort = detail.sort
            this.scoreSaveDto.shelves = detail.shelves
            this.scoreSaveDto.sku = detail.sku
            this.scoreSaveDto.typeId = detail.typeId
            this.detailInfo = detail
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let item = this.options.filter(item => item.id  == this.scoreSaveDto.typeId)
                    if(item.length==0){
                        spuAjax.addScoreMode({name:this.scoreSaveDto.typeId}).then(res => {
                                this.scoreSaveDto.typeId = res
                                this.commit()
                        })
                    }else{
                        this.commit()
                    }
                    
                }
            })
        },
        //新增
        commit(){
            // this.scoreSaveDto.typeId = 1
            if(this.type == 'edit'){
                this.scoreSaveDto.id = this.detailInfo.id
                spuAjax.updateScore(this.scoreSaveDto).then(res => {
                if(res.ok){
                    this.$message({ type: 'success', message: '修改成功' })
                    // this.$router.push({path:'/product/integral',query: {type: 'edit'}});
                    this.$emit('ListenerChild', 'commit')
                    } else{
                    this.$message({ type: 'error', message: '修改失败' })
                }
            })
            }else{
                spuAjax.addScore(this.scoreSaveDto).then(res => {
                    if(res.ok){
                        this.$message({ type: 'success', message: '添加成功' })
                        // this.$router.push({path:'/product/integral',query: {type: 'edit'}});
                        this.$emit('ListenerChild', 'commit')
                        } else{
                        this.$message({ type: 'error', message: '添加失败' })
                    }
                })
            }
        },
        selectMode(value){
            let item = this.options.filter(item => item.id  == value)
            this.scoreSaveDto.modeName = item.length!=0?item[0].name:value
        },
        //积分商品列表
        getUnitList(){
            spuAjax.getScoreModeList().then(res => {
                this.options = res
            })
        },
        //获取sku信息
        getSkuList(){
            spuAjax.getSkuList().then(res => {
                this.skuList = res.list
            })
        },
        //返回
        comeBack(){
            // this.$router.push({path:'/product/integral'});
            this.$emit('ListenerChild', 'back')
        },
        changeCnvertType(){
            this.scoreSaveDto.convertNum  = '';
            this.scoreSaveDto.convertPrice = '';
        },
    }
}
</script>